<!DOCTYPE html>
<html class="page" lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Барбершоп «Бородинский» v2.0</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body class="page__body">
  <header class="page-header">
    <a class="page-header__logo">
      <img src="img/barber-logo-mobile.svg" width="226" height="30" alt="Барбершоп «Бородинский»">
    </a>
    <nav class="main-nav main-nav--closed main-nav--nojs">
      <button class="main-nav__toggle" type="button"><span class="visually-hidden">Открыть меню</span></button>
      <div class="main-nav__wrapper">
        <ul class="main-nav__list site-list">
          <li class="site-list__item site-list__item--active">
            <a>
              Главная
            </a>
          </li>
          <li class="site-list__item">
            <a href="photo.html">
              Наши работы
            </a>
          </li>
          <li class="site-list__item">
            <a href="form.html">
              Записаться
            </a>
          </li>
          <li class="site-list__item">
            <a href="#">
              Контакты
            </a>
          </li>
          <li class="site-list__item">
            <a href="#">
              HTML Academy
            </a>
          </li>
        </ul>
        <ul class="main-nav__list user-list">
          <li class="user-list__item">
            <a class="user-list__login" href="login.html">
              <svg class="user-list__login-icon" width="16" height="16" viewBox="0 0 16 16"
                xmlns="http://www.w3.org/2000/svg">
                <polygon points="0 7 7.01 7 7.01 4.06 10.96 8.01 7.01 11.91 7.01 9.06 0 9.02 0 7" />
                <polygon points="7.01 0 7.01 2 14.03 2 14.03 13.99 7.01 13.99 7.01 16 16 16 16 0 7.01 0" />
              </svg>
              <span>Войти</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main class="page-main">

    <h1 class="visually-hidden">Барбершоп «Бородинский» — истинно мужская классика</h1>

    <section class="stats">
      <div class="stats__wrapper wrapper">
        <header class="stats__header">
          <h2 class="visually-hidden">
            Статистика Барбершопа
          </h2>
          <p class="stats__slogan">
            Стрижка у нас<br>
            это выгодно!
          </p>
          <p class="stats__intro">
            Мужская стрижка требует<br>
            точного подхода. Обратимся<br>
            к статистике:
          </p>
          <p class="stats__legend stats__legend--top">
            <small>
              * — приведённые данные ложь
            </small>
          </p>
        </header>
        <dl class="stats__list">
          <div class="stats__item">
            <dt class="stats__number">
              1 500<sup>*</sup>
            </dt>
            <dd class="stats__description">
              рублей<br>
              вложений
            </dd>
          </div>
          <div class="stats__item">
            <dt class="stats__number">
              7 200
            </dt>
            <dd class="stats__description">
              секунд<br>
              времени мастера
            </dd>
          </div>
          <div class="stats__item">
            <dt class="stats__number">
              90 000
            </dt>
            <dd class="stats__description">
              постриженных<br>
              волос
            </dd>
          </div>
          <div class="stats__item">
            <dt class="stats__number">
              500 000<sup>*</sup>
            </dt>
            <dd class="stats__description">
              рублей<br>
              вложений
            </dd>
          </div>
        </dl>
        <small class="stats__legend stats__legend--bottom">
          * — приведённые данные ложь
        </small>
      </div>
    </section>

    <section class="advantages">
      <div class="advantages__wrapper wrapper slider">
        <h2 class="visually-hidden">Наши преимущества</h2>
        <ul class="advantages__list slider__list">
          <li class="advantages__item advantages__item--fast slider__item slider__item--current">
            <h3 class="advantages__title">Быстро</h3>
            <p class="advantages__description">Мы делаем свою работу быстро! Два часа пролетят незаметно и вы —
              счастливый обладатель стильной стрижки-минутки.</p>
          </li>
          <li class="advantages__item advantages__item--cool slider__item">
            <h3 class="advantages__title">Круто</h3>
            <p class="advantages__description">Забудьте, как вы стриглись раньше. Мы сделаем из вас звезду футбола или
              кино. Во всяком случае внешне.</p>
          </li>
          <li class="advantages__item advantages__item--price slider__item">
            <h3 class="advantages__title">Дорого</h3>
            <p class="advantages__description">Наши мастера — профессионалы своего дела и не могут стоить дёшево. К тому
              же, разве цена не даёт определённый статус?</p>
          </li>
        </ul>
        <p class="advantages__toggles slider__toggles">
          <button class="slider__toggle slider__toggle--current" type="button">1</button>
          <button class="slider__toggle" type="button">2</button>
          <button class="slider__toggle" type="button">3</button>
        </p>
      </div>
    </section>

    <section class="news">
      <div class="news__wrapper wrapper">
        <h2 class="news__title">Новости и акции</h2>
        <ul class="news__list">
          <li class="news__item">
            <a class="news__link" href="#">
              <time class="news__date" datetime="2017-09-29">
                <b class="news__day">29</b> сент
              </time>
              <p class="news__text">Нам наконец-то завезли Егермейстер! Теперь вы можете пропустить стаканчик во время
                стрижки.</p>
            </a>
          </li>
          <li class="news__item">
            <a class="news__link" href="#">
              <time class="news__date" datetime="2017-09-19">
                <b class="news__day">19</b> сент
              </time>
              <p class="news__text">В нашей команде пополнение, Борис «Бритва» Стригунец пополнил наши стройные ряды.
                Спешите записаться!</p>
            </a>
          </li>
          <li class="news__item">
            <a class="news__link" href="#">
              <time class="news__date" datetime="2017-09-09">
                <b class="news__day">9</b> сент
              </time>
              <p class="news__text">Всё дорожает, а наши стрижки нет! Как так? Приходите, постригитесь и узнаете, в чём
                здесь подвох!</p>
            </a>
          </li>
        </ul>
        <a class="news__to-all button" href="#">Показать все</a>
      </div>
    </section>

    <section class="reviews">
      <div class="reviews__wrapper wrapper slider">
        <h2 class="reviews__title">Отзывы о нас</h2>
        <a class="reviews__write button" href="#">Оставить свой</a>
        <div class="reviews__list slider__list">
          <blockquote class="reviews__item reviews__item--current slider__item--current">
            <img class="reviews__avatar" src="img/travis-mobile@1x.jpg" width="50" height="50"
              alt="Фото Трэвиса Баркера">
            <div class="reviews__author-info">
              <cite class="reviews__author-name">Трэвис Баркер</cite>
              <p class="reviews__text">Спасибо за лысину! Был проездом в Москве, заскочил побриться, чтобы было видно
                новую татуировку!</p>
            </div>
          </blockquote>
          <blockquote class="reviews__item slider__item">
            <img class="reviews__avatar" src="img/travis-mobile@1x.jpg" width="50" height="50"
              alt="Фото Трэвиса Баркера">
            <div class="reviews__author-info">
              <cite class="reviews__author-name">Джон Смит</cite>
              <p class="reviews__text">Отличную стрижку мне сделали ребята.</p>
            </div>
          </blockquote>
          <blockquote class="reviews__item slider__item">
            <img class="reviews__avatar" src="img/travis-mobile@1x.jpg" width="50" height="50"
              alt="Фото Трэвиса Баркера">
            <div class="reviews__author-info">
              <cite class="reviews__author-name">Иван Бородайло</cite>
              <p class="reviews__text">В Бородинском ваша борода в надёжных руках!</p>
            </div>
          </blockquote>
          <button class="reviews__prev" type="button">Предыдущий отзыв</button>
          <button class="reviews__next" type="button">Следующий отзыв</button>
        </div>
        <p class="reviews__slider slider__toggles">
          <button class="slider__toggle slider__toggle--current" type="button">1</button>
          <button class="slider__toggle" type="button">2</button>
          <button class="slider__toggle" type="button">3</button>
        </p>
      </div>
    </section>
  </main>

  <footer class="page-footer">
    <div class="page-footer__wrapper wrapper">
      <div class="page-footer__contacts contacts">
        <b class="contacts__title">Барбершоп «Бородинский»</b>
        <p class="contacts__text">
          г. Санкт-Петербург, ул. Большая Конюшенная 19/8<br>
          <a class="contacts__phone" href="tel:+78125556666">
            <span class="contacts__phone-mobile">Тел.:</span> +7 (812) 555-66-66
          </a>
        </p>
      </div>
      <div class="page-footer__social social">
        <b class="social__title">Давайте дружить!</b>
        <ul class="social__list">
          <li class="social__item">
            <a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy">
              <svg width="23" height="26" viewBox="0 0 23 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M21.0578 23.1669C22.3524 21.6495 23 19.9256 23 17.9952C23 14.77 20.3795 12.5167 16.7104 11.704C18.2892 11.3102 19.476 10.8769 20.2725 9.82914C21.0685 8.78136 21.4666 7.60888 21.4666 6.31371C21.4666 4.53562 20.7811 3.46042 19.4104 2.07623C18.0395 0.69205 15.8589 0 12.8681 0H0V26H13.5008C17.7378 26.0001 19.7631 24.6843 21.0578 23.1669ZM7.15553 5.14199H10.3755C12.3139 5.14199 13.2834 5.80362 13.2834 7.25114C13.2834 7.78441 13.0757 8.78752 12.6605 9.2572C12.2449 9.72704 11.5314 9.96192 10.5209 9.96192H7.15562V5.14199H7.15553ZM7.11795 20.2097V15.4858H11.0644C12.3381 15.4858 13.2142 15.7367 13.6918 16.2381C14.1692 16.7398 14.4086 17.2887 14.4086 17.8858C14.4086 18.4829 14.1625 19.0189 13.6712 19.4953C13.1794 19.9719 12.4072 20.2097 11.3551 20.2097H7.11795Z"
                  fill="white" />
              </svg>
              <span class="visually-hidden">Мы в Вконтакте</span>
            </a>
          </li>
          <li class="social__item">
            <a class="social__link social__link--facebook" href="https://www.facebook.com/htmlacademy">
              <svg width="18" height="39" viewBox="0 0 18 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M4.6588 39V22.0042H0V14.3584H4.76532V8.03139C4.76532 8.03139 4.98274 0.0619276 11.095 0H17.8977V7.50299H13.678C13.678 7.50299 11.8963 7.50299 11.8963 9.74534C11.8963 11.9829 11.8963 14.4918 11.8963 14.4918H18L17.2669 22.1328H12.0028V39H4.6588Z"
                  fill="white" />
              </svg>
              <span class="visually-hidden">Мы в Фейсбуке</span>
            </a>
          </li>
          <li class="social__item">
            <a class="social__link social__link--instagram" href="https://www.instagram.com/htmlacademy">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M36 0H0V36H36V0ZM18 11.4C21.6456 11.4 24.6 14.3556 24.6 18C24.6 21.6432 21.6456 24.6 18 24.6C14.3556 24.6 11.4 21.6432 11.4 18C11.4 14.3556 14.3556 11.4 18 11.4ZM31.2 31.2H4.8V15H7.6308C7.356 15.9528 7.2 16.9584 7.2 18C7.2 23.964 12.0372 28.8 18 28.8C23.9664 28.8 28.8 23.964 28.8 18C28.8 16.9584 28.644 15.9528 28.3692 15H31.2V31.2ZM31.2 6.0096V9.6288V10.8C31.2 10.8 30.6636 10.7868 30.0192 10.7976V10.8H26.4C25.746 10.8 25.2 10.8 25.2 10.8V4.8H30L30.0192 4.8036C30.0192 4.8036 31.2 4.8096 31.2 4.8C31.2 4.8 31.1976 6.006 31.1976 6.0096H31.2Z"
                  fill="white" />
              </svg>
              <span class="visually-hidden">Мы в Инстаграме</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="page-footer__copyright copyright">
        <p class="copyright__text">Разработано:</p>
        <a class="copyright__link" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a>
      </div>
    </div>
  </footer>

  <script>
    var navMain = document.querySelector('.main-nav');
    var navToggle = document.querySelector('.main-nav__toggle');

    navMain.classList.remove('main-nav--nojs');

    navToggle.addEventListener('click', function () {
      if (navMain.classList.contains('main-nav--closed')) {
        navMain.classList.remove('main-nav--closed');
        navMain.classList.add('main-nav--opened');
      } else {
        navMain.classList.add('main-nav--closed');
        navMain.classList.remove('main-nav--opened');
      }
    });
  </script>
</body>

</html>
